<template>
  <div class="mod-config">
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="商品库存实时查询" name="first">
        <check-index ref="first"></check-index>
      </el-tab-pane>
      <el-tab-pane label="库存综合查询(二维)" name="second">
        <two-index ref="second"></two-index>
      </el-tab-pane>
      <el-tab-pane label="库存综合查询(仓位)" name="three">
        <comprehensive-index ref="three"></comprehensive-index>
      </el-tab-pane>
      <el-tab-pane label="任意时段商品库存查询(任意时段)" name="four">
        <time-index ref="four"></time-index>
      </el-tab-pane>
      <el-tab-pane label="每月月底库存情况查询" name="five">
        <month-index ref="five"></month-index>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import CheckIndex from '../storage/index'
  import TwoIndex from '../storage/two-dimension-index'
  import ComprehensiveIndex from '../storage/comprehensive-check-index'
  import TimeIndex from '../storage/time-storage-index'
  import monthIndex from '../storage/month-index'
  export default {
    data() {
      return {
        activeName: 'first'
      };
    },
    components: {
      CheckIndex,
      TwoIndex,
      ComprehensiveIndex,
      TimeIndex,
      monthIndex
    },
    created(){
      this.$nextTick(() => {
        this.$refs['first'].searchHandle()
      })
    },
    methods: {
      handleClick(tab, event) {
        this.$nextTick(() => {
          this.$refs[tab.name].searchReset()
          if(tab['name'] == 'first' || tab['name'] == 'three' || tab['name'] == 'four' || tab['name'] == 'five'){
            this.$refs[tab.name].searchHandle()
          }else if(tab['name'] == 'second'){
            this.$refs[tab.name].getStockOptions()
          }
        })
      }
    }
  };
</script>
